import { Canvas, Meta, Story, Source } from '@storybook/blocks';
import * as NavbarStories from './navbar.stories';

<Meta title="Molecules/Navbar/Overview" />

# Atoms navbar overview

<br />

## Positions

<br />

### Vertical

<Canvas>
  <Story of={NavbarStories.Navbar}></Story>
</Canvas>

### Horizontal

<Canvas>
  <Story of={NavbarStories.NavbarHorizontal}></Story>
</Canvas>

<Canvas>
  <Story of={NavbarStories.NavbarHorizontalLoading}></Story>
</Canvas>

## Code

<br />

### Vertical

<Source
  language="html"
  dark
  format={false}
  code={`
  <aside class="rw-navbar">
      <ul>
        <li>
          <a class="rw-link rw-active" href="">
            Profile
          </a>
        </li>
        <li>
          <a class="rw-link" href="">
            Security
          </a>
        </li>
        <li>
          <a class="rw-link" href="">
            Preferences
          </a>
        </li>
      </ul>
    </aside>
`}
/>

### Horizontal

<Source
  language="html"
  dark
  format={false}
  code={`
  <aside class="rw-navbar-horizontal">
      <ul>
        <li>
          <a class="rw-link rw-active" href="">
            Latest
          </a>
        </li>
        <li>
          <a class="rw-link" href="">
            Following
          </a>
        </li>
        <li>
          <a class="rw-link" href="">
            #Accessibility
          </a>
        </li>
      </ul>
    </aside>
`}
/>

## Use cases

> This component is used in the following stories:

### Molecules

### Organisms

### Templates

### Pages
